:root {
  --app-background: '';
  --aside-background: '';
  --aside-text-color: '';
  --subnav-background: '';
  --subnav-title-color: '';
  --subnav-text-color: '';
  --subnav-active-text-color: '';
  --panel-background: '';
  --panel-title-color: '';
  --panel-border-color: '';
  --task-item-border-color: '';
  --task-item-hover-border-color: '';
  --task-item-hover-background: '';
  --speedometer-background: '';
  --speedometer-border-color: '';
  --speedometer-hover-border-color: '';
  --speedometer-primary-color: '';
  --speedometer-text-color: '';
}

#app,
#container {
  height: 100%;
  background-color: $--app-background;
}

.aside {
  background-color: $--aside-background;
  color: $--aside-text-color;
}

.subnav {
  background-color: $--subnav-background;
  color: $--subnav-text-color;
}

.subnav-inner {
  margin-top: 44px;
  padding: 0 16px;

  h3 {
    font-size: 16px;
    color: $--subnav-title-color;
    font-weight: normal;
    line-height: 24px;
    margin: 0 0 28px;
  }

  ul {
    list-style: none;
    padding: 0;
    margin: 0;
    user-select: none;
    cursor: default;

    li {
      margin-bottom: 8px;
      padding: 8px 10px;
      font-size: 14px;
      line-height: 20px;
      border-radius: 3px;
      cursor: pointer;

      i,
      span {
        vertical-align: middle;
        display: inline-block;
      }

      &:hover,
      &.active {
        background-color: #EAECF0;

        i,
        span,
        svg {
          color: $--subnav-active-text-color;
        }
      }
    }
  }
}

.subnav-icon {
  padding: 2px;
  height: 16px;
  margin-right: 12px;

  svg {
    width: 16px;
    height: 16px;
  }
}

.content {
  padding: 0;
}
